<template>
	<uni-forms-item
		v-if="!rawRules"
		ref="uni-forms-item"
		:name="name"
		:rules="rules"
		class="formItem"
		:required="showRequired">
		<template #label>
			<div class="labelbox">
				<div class="label">
					<text v-if="showRequired" class="is-required">*</text>
					{{ label || '' }}
					<slot name="labelIcon"></slot>
				</div>
			</div>
		</template>

		<!-- -->
		<div class="contentbox" :class="[isPreview ? 'previewBox' : '']">
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</uni-forms-item>
	<uni-forms-item
		v-else
		ref="uni-forms-item"
		:name="name"
		class="formItem"
		:required="showRequired">
		<template #label>
			<div class="labelbox">
				<div class="label">
					<text v-if="showRequired" class="is-required">*</text>
					{{ label || '' }}
					<slot name="labelIcon"></slot>
				</div>
			</div>
		</template>
		<!-- -->

		<div class="contentbox" :class="[isPreview ? 'previewBox' : '']">
			<div class="content">
				<slot></slot>
			</div>
		</div>
	</uni-forms-item>
</template>

<script>
	export default {
		name: '',
		options: {
			styleIsolation: 'shared',
		},
		components: {},
		props: {
			label: {
				required: false,
			},
			errorLabel: {
				required: false,
			},
			required: {
				required: false,
			},
			name: {
				required: false,
			},
			type: {
				required: false,
			},
			state: {
				required: false,
				default: 'write',
			},
			showRequiredIcon: {
				required: false,
			},
			keepRules: {
				required: false,
				default: false,
			},
			show: {
				required: false,
			},
			rule: {
				required: false,
				type: Array,
			},
			rawRules: {
				required: false,
				default: false,
			},
		},
		data() {
			return {
				a: {
					b: 1,
				},
			};
		},
		computed: {
			detaultRules() {
				return [
					{
						required: true,
						errorMessage: `请输入${
							this.label ?? this.errorLabel ?? ''
						}`,
					},
				];
			},
			rules() {
				if (
					this.required &&
					(this.state == 'write' || this.keepRules == true)
				) {
					return this.rule?.length > 0
						? this.rule
						: this.detaultRules;
				} else {
					return [];
				}
			},
			showRequired() {
				return this.showRequiredIcon ?? this.rules?.length > 0;
			},
			isPreview() {
				return this.$parent.labelPosition === 'left';
			},
		},
		created() {},
		mounted() {},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms-item {
		position: relative;
		display: flex;
		/* #ifdef APP-NVUE */
		// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
		padding-bottom: 22px;
		/* #endif */
		/* #ifndef APP-NVUE */
		margin-bottom: 22px;
		/* #endif */
		flex-direction: row;

		&__label {
			display: flex;
			flex-direction: row;
			align-items: center;
			text-align: left;
			font-size: 14px;
			color: #606266;
			height: 36rpx;
			padding: 0 12px 0 0;
			/* #ifndef APP-NVUE */
			vertical-align: middle;
			flex-shrink: 0;
			/* #endif */

			/* #ifndef APP-NVUE */
			box-sizing: border-box;

			/* #endif */
			&.no-label {
				padding: 0;
			}
		}

		&__content {
			/* #ifndef MP-TOUTIAO */
			// display: flex;
			// align-items: center;
			/* #endif */
			position: relative;
			font-size: 14px;
			flex: 1;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			/* #endif */
			flex-direction: row;

			/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
			// TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
			& > uni-easyinput,
			& > uni-data-picker {
				width: 100%;
			}

			/* #endif */
		}

		& .uni-forms-item__nuve-content {
			display: flex;
			flex-direction: column;
			flex: 1;
		}

		&__error {
			color: #f56c6c;
			font-size: 12px;
			line-height: 1;
			padding-top: 4px;
			position: absolute;
			/* #ifndef APP-NVUE */
			top: 100%;
			left: 0;
			transition: transform 0.3s;
			transform: translateY(-100%);
			/* #endif */
			/* #ifdef APP-NVUE */
			bottom: 5px;
			/* #endif */

			opacity: 0;

			.error-text {
				// 只有 nvue 下这个样式才生效
				color: #f56c6c;
				font-size: 12px;
			}

			&.msg--active {
				opacity: 1;
				transform: translateY(0%);
			}
		}

		// 位置修饰样式
		&.is-direction-left {
			flex-direction: row;
		}

		&.is-direction-top {
			flex-direction: column;

			.uni-forms-item__label {
				padding: 0 0 8px;
				line-height: 1.5715;
				text-align: left;
				/* #ifndef APP-NVUE */
				white-space: initial;
				/* #endif */
			}
		}

		.is-required {
			// color: $uni-color-error;
			color: #dd524d;
			font-weight: bold;
		}
	}

	::v-deep .uni-forms-item--border {
		margin-bottom: 0;
		padding: 10px 0;
		// padding-bottom: 0;
		border-top: 1px #eee solid;

		/* #ifndef APP-NVUE */
		.uni-forms-item__content {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.uni-forms-item__error {
				position: relative;
				top: 5px;
				left: 0;
				padding-top: 0;
			}
		}

		/* #endif */

		/* #ifdef APP-NVUE */
		display: flex;
		flex-direction: column;

		.uni-forms-item__error {
			position: relative;
			top: 0px;
			left: 0;
			padding-top: 0;
			margin-top: 5px;
		}

		/* #endif */
	}
	.labelbox {
		height: 100%;
		.label {
			display: flex;
			align-items: center;
			font-weight: 300;
		}
	}
	.contentbox {
		margin-top: 10rpx;
	}
	.previewBox {
		margin-top: 0rpx;
		display: flex;
		justify-content: flex-end;
		.content {
			max-width: 500rpx;
			text-align: justify;
		}
	}
	.content {
		// min-height: 32px;
	}
	.is-required {
		// color: $uni-color-error;
		color: #dd524d;
		font-weight: bold;
	}
</style>
